<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    :title="title" width="900">
    <el-form :model="form">
      <el-row :gutter="24">
        <el-col :span="14">
          <el-form-item label="班级名称" label-width="100px">
            <el-input v-model="form.name" placeholder="请输入班级名称" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="开班日期" label-width="100px">
            <el-date-picker v-model="form.issue" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择入职时间" :editable="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="科目" label-width="100px">
            <el-tree-select v-model="form.subjectId" :data="subjectData" clearable @change="subjectFn" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程" label-width="100px">
            <el-select v-model="form.courseIds" clearable multiple filterable placeholder="请优先选择科目再搜索课程" remote
              remote-show-suffix :remote-method="getCourseList">
              <el-option v-for="item in courseData" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="封面图" label-width="100px">
            <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
              :show-file-list="false" :on-success="coverSuccess">
              <el-image v-if="form.imgs" :src="form.imgs" class="avatar" fit="cover"></el-image>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="班级简介" label-width="100px">
            <el-input type="textarea" v-model="form.brief" rows="8" placeholder="请输入班级简介" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责老师" label-width="100px">
            <el-input :value="form.teacherName" readonly placeholder="请添加负责老师" autocomplete="off">
              <template #append>
                <el-button :icon="Delete" v-if="form.teacherName" @click="teacherDelFn" />
                <el-button :icon="Search" v-else @click="teacherOpenFn" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总学时" label-width="100px">
            <el-input type="number" min="0" v-model="form.totalHours" placeholder="请输入总学时" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学员上限数" label-width="100px">
            <el-input type="number" min="1" v-model="form.maxCount" placeholder="请输入学员上限数" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="每日最多学时" label-width="100px">
            <el-input type="number" min="0" v-model="form.dayOfHours" placeholder="每日最多学时(为负数时表示使用课程的设置，为0表示不限制)"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="报名开始时间" label-width="100px">
            <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择报名开始时间" :editable="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="报名截止时间" label-width="100px">
            <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择报名截止时间" :editable="false" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="是否结束" label-width="100px">
            <el-switch v-model="form.finished" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单选题数量" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.radioSize" placeholder="请输入单选题数量"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="多选题数量" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.checkboxSize" placeholder="请输入多选题数量"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="判断题数量" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.judgeSize" placeholder="请输入判断题数量"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单选题分值" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.radioScore" placeholder="请输入单选题分值"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="多选题分值" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.checkboxScore" placeholder="请输入多选题分值"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="判断题分值" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.judgeScore" placeholder="请输入判断题分值"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="及格分" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.passScore" placeholder="请输入及格分"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总分" label-width="100px">
            <el-input type="number" min="0" :value="form.totalScore" disabled readonly placeholder="请输入总分"
              autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="时长" label-width="100px">
            <el-input type="number" min="0" v-model="form.examSetting.duration" placeholder="请输入时长(秒)"
              autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <MyTeacher :teacherVisible="teacherVisible" @teacherPick="teacherPickFn" />
</template>

<script setup>
import { Plus, Search, Delete } from '@element-plus/icons-vue'
import { getQuestionListApi, courseList, teacherList } from '~/server/api';
import { treeFn } from '~/utils/utils';
import MyTeacher from '~/components/Teacher'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  forms: {
    type: Object
  },
  title: {
    type: String,
    default: '班级表单'
  }
})
const form = props.forms;
// 添加负责老师
const teacherVisible = ref(false)
const teacherOpenFn = () => {
  teacherVisible.value = true;
}
// 清除负责老师
const teacherDelFn = () => {
  form.teacherId = '';
  form.teacherName = '';
}
// 监听
watchEffect(() => {
  // 总分
  let radioCount = form.examSetting.radioSize * form.examSetting.radioScore;
  let checkboxCount = form.examSetting.checkboxSize * form.examSetting.checkboxScore;
  let judgeCount = form.examSetting.judgeSize * form.examSetting.judgeScore;
  form.totalScore = Math.ceil(radioCount) + Math.ceil(checkboxCount) + Math.ceil(judgeCount)
  // 课程
  if (form.subjectId) {
    courseForm.value.subjectId = form.subjectId;
    setTimeout(() => {
      getCourseList()
    }, 500)
  }
})
// 科目
const subjectData = ref([])
const { data: subjectRes } = await useAsyncData('getQuestionListApi', () => useServerRequest(getQuestionListApi, {
  method: 'post',
  body: JSON.stringify({
    pageNum: 1,
    pageSize: 500,
    courseOpen: true,
    exerciseOpen: true
  })
}))
if (subjectRes.value && subjectRes.value.errno === 0) {
  subjectData.value = treeFn(subjectRes.value.result.list, 0, []);
}
// 课程
const courseData = ref([])
const courseForm = ref({
  pageNum: 1,
  pageSize: 20,
  institutionId: 0,
  subjectId: 0,
  keyword: ''
})
const getCourseList = async (val) => {
  courseData.value = [];
  if (form.subjectId && form.subjectId > 0) {
    courseForm.value.keyword = val;
    let courseRes = await useServerRequest(courseList, {
      method: 'post',
      body: JSON.stringify(courseForm.value)
    })
    if (courseRes.errno === 0) {
      courseData.value = courseRes.result.list;
      return false;
    }
  }
}
// 科目选择
const subjectFn = (val) => {
  courseData.value = [];
  form.courseIds = [];
  if (val) {
    courseForm.value.subjectId = val;
    getCourseList()
  }
}
// 封面图上传
const coverSuccess = (res) => {
  if (res.errno === 0) {
    form.imgs = res.result[0];
    return false;
  }
}
// 取消
const emit = defineEmits(['pick'])
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 确认
const confirmFn = () => {
  emit('pick', { visible: false, form })
}
// 老师取消 确认
const teacherPickFn = (e) => {
  teacherVisible.value = e.visible;
  if (e.form) {
    form.teacherId = e.form.id;
    form.teacherName = e.form.name;
  }
}
</script>

<style lang="less" scoped>
.avatar-uploader {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  background: #FFFFFF;

  &:hover {
    border-color: #C0C4CC;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .video {
    width: 100%;
    height: 178px;
    border-radius: 3px;
  }

  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #D6D6D6;
    width: 178px;
    height: 178px;
    text-align: center;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>